<template>
  <div class="popout">
    <div class="pop-up">
      <header>
        <span>运费模板</span>
        <svg-icon iconClass="x" @click="addpop"></svg-icon>
      </header>
      <main>
        <el-form ref="form" :model="form" label-width="200px">
          <el-form-item label="模板名称名称">
            <el-input v-model="form.name" placeholder="请输入模板名称"></el-input>
          </el-form-item>
          <el-form-item label="记费方式">
            <el-radio-group v-model="radio">
              <el-radio :label="3">按件数</el-radio>
              <el-radio :label="6">按数量</el-radio>
              <el-radio :label="9">按体积</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="配送区域及运费">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="date" label="可配送区域"></el-table-column>
              <el-table-column label="首件" width="150">
                <el-input-number
                  v-model="num"
                  controls-position="right"
                  @change="handleChange"
                  :min="1"
                  :max="30"
                ></el-input-number>
              </el-table-column>
              <el-table-column prop="address" label="用费（元）" width="150">
                <el-input-number
                  v-model="num"
                  controls-position="right"
                  @change="handleChange"
                  :min="1"
                  :max="30"
                ></el-input-number>
              </el-table-column>
              <el-table-column prop="address" label="续件" width="150">
                <el-input-number
                  v-model="num"
                  controls-position="right"
                  @change="handleChange"
                  :min="1"
                  :max="30"
                ></el-input-number>
              </el-table-column>
              <el-table-column prop="address" label="续件（元）" width="150">
                <el-input-number
                  v-model="num"
                  controls-position="right"
                  @change="handleChange"
                  :min="1"
                  :max="30"
                ></el-input-number>
              </el-table-column>
              <el-table-column prop="address" label="操作"></el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item class="region">
            <el-button type="primary">添加配送区域</el-button>
          </el-form-item>
          <el-form-item label="指定包邮">
            <el-radio-group v-model="radios">
              <el-radio :label="3">开启</el-radio>
              <el-radio :label="6">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="排序">
            <el-input v-model="form.sort" placeholder="0"></el-input>
          </el-form-item>
          <el-form-item class="appointButton">
            <el-button @click="onSubmit">取消</el-button>
            <el-button type="primary" @click="onSubmit">确定</el-button>
          </el-form-item>
        </el-form>
      </main>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radios: 1,
      radio: 1,
      startTime: "",
      endTime: "",
      value: "",
      num: 1,
      dialogImageUrl: "",
      dialogVisible: false,
      form: {
        sort: "",
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      tableData: [
        {
          date: "默认全国",
        },
      ],
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    onSubmit() {
      this.$emit("isShow", false);
    },
    addpop() {
      this.$emit("isShow", false);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="scss">
.popout {
  width: 100%;
  height: 100%;
  background: rgba($color: #000000, $alpha: 0.4);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  .pop-up {
    width: 75%;
    height: auto;
    background: #fff;
    margin: 150px auto;
    border-radius: 8px;
    padding: 9px;
    header {
      height: 31px;
      border-bottom: 1px solid #f6f7f8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        color: #c2c4c7;
        font-weight: bold;
        font-size: 14px;
      }
    }
    main {
      .appointButton {
        width: 100%;
        height: 100%;
        text-align: right;
      }
      .region {
        margin: 10px 0;
      }
      .el-input-number {
        width: 120px;
        height: 40px;
        overflow: hidden;
        border: 1px #ccc solid;
        border-radius: 5px;
        background: #fff;

        .el-input {
          width: 100px;

          margin: 0;
          .el-input__inner {
            width: 90px;
            padding: 0;
            border: none;
          }
        }
      }

      margin-top: 9px;
      .el-upload--picture-card {
        width: 300px;
        height: 300px;
        line-height: 300px;
        // text-align: center;
      }
      .el-upload--picture-card i {
        font-size: 14px;
      }
      .el-select {
        width: 90%;
      }
    }
  }
}
</style>
